<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="demo">
        <h2>模仿vue实现简单的数据绑定</h2>
        <p>{{title}}</p>
        <p>msg=={{msg}}</p>
        {{num}}
    </div>
    <script>
        function Demo(obj) {
            this.el = document.querySelector(obj.el)
            let data = obj.data
            console.log(data.msg);
            let text1
            for (let key in obj.data) {
                let child = this.el.childNodes;
                console.log(child);
                for (let i = 0; i < child.length; i++) {
                    // console.log(child[5].innerText);
                    let text = child[5].innerText;
                    if (text.includes("{{")) {
                        text1 = text.replace("{{msg}}", data.msg)

                    }
                }
            }
            console.log(text1);

        }
        const demo = new Demo({
            el: ".demo",
            data: {
                title: "你好",
                msg: "元宵节快乐",
                num: 0
            }
        })
        console.log(demo);
    </script>
</body>

</html>